<template>
  <d2-container class="page">
    <el-col :span="24">
      <el-card shadow="never" class="box-card">
        <el-row>
          <el-form  :model="searchInfo" size="medium" label-width="100px" label-position="left">
            <el-row>
              <el-col :span="8">
                <el-form-item label="模板名称" prop="templateName">
                  <el-input v-model="searchInfo.templateName" :disabled='true' :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模板类型" prop="templateType">
                  <el-select v-model="searchInfo.templateType" :disabled='true' :style="{width: '100%'}">
                    <el-option
                  v-for="item in templateTypeOptions"
                  :key="Number(item.value)"
                  :value="Number(item.value)"
                  :label="item.label"
                ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="模板种类" prop="templateTermType">
                  <el-select v-model="searchInfo.templateTermType" :disabled='true' :style="{width: '100%'}">
                    <el-option v-for="(item, index) in templateTermTypeOptions" :key="index" :label="item.label"
                      :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="财务因素所占权重比（%）" prop="financialAccounting">
                  <el-input v-model="searchInfo.financialAccounting" :disabled='true' :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="非财务因素所占权重比（%）" prop="nonFinancialAccounting">
                  <el-input v-model="searchInfo.nonFinancialAccounting" :disabled='true' :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结果无效分差" prop="financialNonFinancialScoreGap">
                  <el-input v-model="searchInfo.financialNonFinancialScoreGap" :disabled='true'
                    :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="是否禁用" prop="isEnabled">
                  <el-select v-model="searchInfo.isEnabled" :disabled='true' :style="{width: '100%'}">
                    <el-option
                  v-for="item in isEnabledOptions"
                  :key="Number(item.value)"
                  :value="Number(item.value)"
                  :label="item.label"
                ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
        <el-row>
          <el-tabs v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="客户关联" name="userInfo">
              <el-row :gutter="2">
                <div class="avue-crud__menu">
                  <div class="avue-crud__left">
                    <button
                      type="button"
                      @click="handleAddNew()"
                      class="el-button filter-item el-button--success el-button--mini"
                    >
                      <i class="fa fa-plus"></i>
                      <span>新增</span>
                    </button>
                  </div>
                </div>
              <!-- <el-col :xs="10">

              </el-col> -->
            </el-row>
            <el-row>

            </el-row>
            </el-tab-pane>
            <el-tab-pane label="非财务因素" name="non-financial factor">
              <el-row :gutter="2">
                <div class="avue-crud__menu">
                  <div class="avue-crud__left">
                    <button
                      type="button"
                      @click="handleAddNew()"
                      class="el-button filter-item el-button--success el-button--mini"
                    >
                      <i class="fa fa-plus"></i>
                      <span>新增</span>
                    </button>
                  </div>
                </div>
              </el-row>
              <el-row>
                <el-table
                v-loading="loading"
                :data="metricDefList"
                ref="metricDefListRef"
                border
                :fit="true"
                :header-cell-style="{'text-align':'center'}"
              >
                <el-table-column
                  sortable
                  resizable
                  align="center"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  prop="metricCode"
                  label="评级指标编码"
                  :show-overflow-tooltip="true"

                ></el-table-column>
                <el-table-column
                  prop="metricKind"
                  label="指标分类"

                >
                <template slot-scope="scope">
                    {{getDictEntryInfo('metric_kind',scope.row.metricKind).label}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="metricType"
                  label="指标类型"
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                >
                <template slot-scope="scope">
                    {{getDictEntryInfo('metric_type',scope.row.metricType).label}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="metricName"
                  label="指标名称"
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="weight"
                  label="权重（%）"
                  sortable
                  resizable
                  :show-overflow-tooltip="true"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="isEnabled"
                  label="模板状态"
                  :show-overflow-tooltip="true"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.isEnabled === 1 ? 'success' : 'danger'"
                      disable-transitions
                    >
                      {{getDictEntryInfo('sys_common_status',scope.row.isEnabled).label}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  sortable
                  resizable

                  align="center"
                  min-width="150"
                >
                  <template slot-scope="scope">
                    <el-button
                      title="修改"
                      @click="handlerUpdate(scope.row)"
                      type="primary"
                      icon="fa fa-pencil"
                      size="mini"
                    ></el-button>
                    <el-button
                      title="删除"
                      @click="handlerDelete(scope.row)"
                      type="danger"
                      icon="fa fa-trash"
                      size="mini"
                    ></el-button>
                    <!-- <el-button
                      title="模板设置"
                      @click="rating_template_setting(scope.row)"
                      type="warning"
                      icon="fa fa-cog"
                      size="mini"
                    ></el-button> -->
                  </template>
                </el-table-column>
              </el-table>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-card>
    </el-col>
    <el-dialog
      :title="dialogName"
      :before-close="handleDialogClose"
      :visible.sync="dialogTableVisible"
      :destroy-on-close="!dialogTableVisible"
    >
    <el-form ref="formRef" :model="formData" :rules="formRule" size="medium" label-width="100px"
    label-position="left">
    <div v-if="num===2">
      <el-row>
      <el-col :span="12">
        <el-form-item label="指标编码" prop="metricCode">
          <el-input v-model="formData.metricCode" placeholder="指标编码" clearable :style="{width: '100%'}" :disabled="isUpdate">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="权重" prop="weight">
          <el-input v-model="formData.weight" placeholder="请输入权重" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="指标类型" prop="metricType">
          <el-select v-model="formData.metricType" placeholder="请选择指标类型" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in metricTypeOptions"
              :key="Number(item.value)"
              :label="item.label"
              :value="Number(item.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="指标名称" prop="metricName">
          <el-input v-model="formData.metricName" placeholder="请输入指标名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="状态" prop="isEnabled">
          <el-select v-model="formData.isEnabled" placeholder="请选择状态" clearable :style="{width: '100%'}">
            <el-option
              v-for="item in isEnabledOptions"
              :key="Number(item.value)"
              :label="item.label"
              :value="Number(item.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3">
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addMetricDefRatingListRow()">新增</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label-width="0">
          <el-button type="danger" icon="el-icon-close" size="small" @click="removeMetricDefRatingListRow()">删除</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        v-loading="loading"
        :data="metricDefRatingList"
        ref="metricDefRatingListRef"
        border
        :fit="true"
        :header-cell-style="{'text-align':'center'}"
      >
        <el-table-column
          sortable
          resizable
          align="center"
          type="selection"
        ></el-table-column>
        <el-table-column
          prop="ratingDomain"
          label="评级指标域值"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.ratingDomain">
                <span>{{scope.row.ratingDomain}}</span>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="ratingName"
          label="评级指标域名称"
        >
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.ratingName">
                <span>{{scope.row.ratingName}}</span>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="显示顺序"
          resizable
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.sort">
                <span>{{scope.row.sort}}</span>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          sortable
          resizable

          align="center"
          min-width="150"
        >
          <template slot-scope="scope">
            <el-button
              title="修改"
              @click="handlerUpdate(scope.row)"
              type="primary"
              icon="fa fa-pencil"
              size="mini"
            ></el-button>
            <el-button
              title="删除"
              @click="handlerDelete(scope.row)"
              type="danger"
              icon="fa fa-trash"
              size="mini"
            ></el-button>
            <!-- <el-button
              title="模板设置"
              @click="rating_template_setting(scope.row)"
              type="warning"
              icon="fa fa-cog"
              size="mini"
            ></el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    </div>

  </el-form>
      <!-- <el-form
        label-width="200px"
        :model="ratingTemplateInfo"
        ref="userFormRef"
        required-asterisk
        :label-position="position"
        center
      >
        <el-row>
          <el-col :span="12">
            <el-form-item required label="模板名称" prop="templateName">
              <el-input :disabled="isUpdate" v-model="ratingTemplateInfo.templateName" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板类型" prop="templateType">
              <el-select  v-model="ratingTemplateInfo.templateType" placeholder="请选择" clearable :style="{width: '100%'}">
                <el-option
                  v-for="item in templateTypeOptions"
                  :key="Number(item.value)"
                  :value="Number(item.value)"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板种类" prop="templateTermType">
              <el-select  v-model="ratingTemplateInfo.templateTermType" placeholder="请选择" clearable :style="{width: '100%'}">
                <el-option
                  v-for="item in templateTermTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item required label="财务因素所占权重比(%)" prop="financialAccounting">
              <el-input v-model.number="ratingTemplateInfo.financialAccounting" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item required label="非财务因素所占权重比(%)" prop="nonFinancialAccounting">
              <el-input v-model.number="ratingTemplateInfo.nonFinancialAccounting" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item required label="财务得分与非财务得分分差为多少评级结果无效" prop="financialNonFinancialScoreGap">
              <el-input v-model.number="ratingTemplateInfo.financialNonFinancialScoreGap" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item required label="是否启用：" prop="isEnabled" v-if="isUpdate">
              <el-radio-group  v-model="ratingTemplateInfo.isEnabled">
                <el-radio
                  v-for="item in isEnabledOptions "
                  :key="Number(item.value)"
                  :label="Number(item.value)"
                >{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleSave"
          size="medium"
        >保存</el-button>
        <el-button size="medium" @click="handleDialogClose">取 消</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import util from '@/libs/util'
import { MessageBox } from 'element-ui'
export default {
  data () {
    return {
      loading: true,
      num: undefined,
      isUpdate: false,
      searchInfo: {},
      isEnabledOptions: [],
      templateTypeOptions: [],
      templateTermTypeOptions: [],
      metricTypeOptions: [],
      metricKindOptions: [],
      metricDefList: [],
      metricDefRatingList: [],
      formData: {
        metricCode: undefined,
        weight: undefined,
        metricType: undefined,
        metricName: undefined,
        isEnabled: 1
        // templateId: undefined
      },
      formRule: {
        metricCode: [{
          required: true,
          message: '指标编码',
          trigger: 'blur'
        }],
        weight: [{
          required: true,
          message: '请输入权重',
          trigger: 'blur'
        }],
        metricType: [{
          required: true,
          message: '请选择指标类型',
          trigger: 'change'
        }],
        metricName: [{
          required: true,
          message: '请输入指标名称',
          trigger: 'blur'
        }],
        isEnabled: [{
          required: true,
          message: '请选择状态',
          trigger: 'change'
        }]
      },
      activeName: 'userInfo',
      dialogTableVisible: false,
      dialogName: ''
    }
  },
  mounted () {
    const _self = this
    _self.initDict()
    _self.getPersonalRatingTemplateInfo().then(res => {
      _self.searchInfo = res
    })
    // _self.searchInfo = _self.info
  },
  methods: {
    ...mapActions('credit/ratingTemplate', [
      'dispatchPersonalRatingTemplateInfo',
      'getPersonalRatingTemplateInfo'
    ]),
    ...mapActions('credit/metricDef', [
      'metricDefSave',
      'metricDefDelete',
      'metricDefListAll',
      'metricDefUpdate'
    ]),
    /**
     * 数据字典
     */
    initDict () {
      const _self = this
      _self.templateTypeOptions = util.dict.getDictValue('template_type')
      _self.templateTermTypeOptions = util.dict.getDictValue('template_term_type')
      _self.isEnabledOptions = util.dict.getDictValue('sys_common_status')
      _self.metricTypeOptions = util.dict.getDictValue('metric_type')
      _self.metricKindOptions = util.dict.getDictValue('metric_kind')
    },
    getDictEntryInfo (type, entryValue) {
      return util.dict.getDictEntryValue(type, entryValue)
    },
    getMetricDefList () {
      const _self = this
      _self.loading = true
      const params = {
        metricKind: Number(_self.metricKindOptions[1].value)
      }
      _self.metricDefListAll({ data: params }).then((result) => {
        _self.metricDefList = result.records
        // _self.searchInfo.total = Number(result.records.total)
        _self.loading = false
      })
    },
    tabHandleClick (tab, event) {
      switch (tab.name) {
        case 'non-financial factor' :
          this.getMetricDefList()
          this.num = 2
      }
      if (tab.name === 'on_offer') {
        this.searchInfo.goodStatus = 1
        // this.getPage()
      }
      if (tab.name === 'sold_out') {
        // this.getPage()
      }
    },
    /**
     * 关闭弹出
     */
    handleDialogClose () {
      const _self = this
      _self.dialogTableVisible = false
      // _self.initRatingTemplateInfo()
      // _self.getPage()
      _self.initFormData()
    },
    initFormData () {
      this.formData = {
        metricCode: undefined,
        weight: undefined,
        metricType: undefined,
        metricName: undefined,
        isEnabled: 1
        // templateId: undefined
      }
    },
    /**
     * 新增
     */
    handleAddNew () {
      const _self = this
      // if (num === 1) {
      //   this.dialogName = '客户关联新增'
      // }
      switch (_self.num) {
        case 1 : this.dialogName = '客户关联新增'
          break
        case 2 : this.dialogName = '非财务因素新增'
          break
      }
      // _self.initRatingTemplateInfo()
      _self.isUpdate = false
      _self.dialogTableVisible = true
    },
    handlerUpdate (row) {
      const _self = this
      switch (this.num) {
        case 2 : this.dialogName = '非财务因素修改'
          _self.formData = JSON.parse(JSON.stringify(row))
      }
      _self.isUpdate = true
      _self.dialogTableVisible = true
    },
    /**
     * 删除
     */
    handlerDelete (row) {
      const _self = this
      MessageBox.confirm('是否删除该数据', '删除', {
        type: 'warning'
      }).then(() => {
        switch (_self.num) {
          case 2 : {
            const ids = []
            ids.push(row.metricCode)
            _self.deleteMetricDef(ids)
            break
          }
        }
      })
    },
    /**
     * 保存
     */
    handleSave () {
      const _self = this
      _self.$refs.formRef.validate((valid) => {
        if (valid) {
          if (_self.isUpdate) {
            switch (_self.num) {
              case 2 : _self.editMetricDef()
                break
            }
          } else {
            switch (_self.num) {
              case 2 : _self.saveMetricDef()
                break
            }
          }
        } else {
          this.$message.error('表单校验失败，请检查')
        }
      })
    },
    saveMetricDef () {
      const _self = this
      const params = JSON.parse(JSON.stringify(_self.formData))
      params.metricKind = Number(_self.metricKindOptions[1].value)
      _self.metricDefSave({ data: params }).then((result) => {
        _self.$message.success('添加成功')
        _self.handleDialogClose()
        _self.getMetricDefList()
      })
    },
    editMetricDef () {
      const _self = this
      const params = JSON.parse(JSON.stringify(_self.formData))
      params.metricKind = Number(_self.metricKindOptions[1].value)
      _self.metricDefUpdate({ data: params }).then((result) => {
        _self.$message.success('修改成功')
        _self.handleDialogClose()
        _self.getMetricDefList()
      })
    },
    deleteMetricDef (ids) {
      const _self = this
      if (ids.length > 0) {
        const params = JSON.parse(JSON.stringify(ids))
        _self.metricDefDelete({ data: { ids: params } }).then((result) => {
          _self.$message.success('删除成功')
          _self.getMetricDefList()
        })
      }
    },
    addMetricDefRatingListRow () {
      this.metricDefRatingList.push({ ratingDomain: '', ratingName: '', sort: '' })
    },
    removeMetricDefRatingListRow () {
      const info = JSON.parse(JSON.stringify(this.$refs.metricDefRatingListRef.selection))
      const oldMetricDefRatingList = JSON.parse(JSON.stringify(this.metricDefRatingList))
      this.metricDefRatingList = oldMetricDefRatingList.filter((x) => !info.some((item) => oldMetricDefRatingList.indexOf(x) === item))
      console.log(info)
      console.log('metricDefRatingList')
      console.log(this.metricDefRatingList)
      // this.metricDefRatingList.pop()
    }
  },
  computed: {
    ...mapGetters({ info: 'personalRatingTemplateInfo' }

    )
  }
}
</script>

<style>

</style>
